<template>
	<view class='comments-pop'>

		<uni-popup ref="popup" type="bottom" :mask-click="false">

			<view class='pop-con'>

				<view class='con-title'>
					<text class="con-title-text">共 {{total}} 条评论</text>
					<image class="con-title-image" src='https://dnsverify.pfmoto.com/appstatic/community/x.png'
						@click='close'>
					</image>
				</view>
				<z-paging ref="paging" style="width: 690rpx;height: 100%;" v-model="commentList"
					@query="loadCommentList" :fixed="false" :auto="false">
					<z-paging-cell>
						<view class='hot-com' v-if="commentList.length>=3" @click="selectOriginal">
							<view class='com-title'><text class='com-title'>最热评论</text></view>
							<view class='com-list'>
								<view class='l-first'>
									<image class="header-img" mode='aspectFit'
										:src="hotList.firstComment.userimages||'https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png'">
									</image>
									<view class='list-con'>
										<!-- <view class='list-name'>{{hotList.firstComment.userName}}</view> -->


										<view class='list-name'
											v-if="hotList.firstComment.wechatName==''||hotList.firstComment.wechatName==null">
											<view
												v-if="hotList.firstComment.phone==null||hotList.firstComment.phone==undefined">
												<text class="list-name-text"> 已注销用户</text>

											</view>
											<view v-else>
												<text
													class="list-name-text">{{hotList.firstComment.phone.substr(0, 3) + '*****' + hotList.firstComment.phone.substr(8)}}</text>

											</view>
										</view>
										<view class='list-name' v-else><text
												class="list-name-text">{{hotList.firstComment.wechatName}}</text>
										</view>

										<view class='list-content' @click.stop="selectCommpent(hotList.firstComment,1)">
											<text class='list-content' :style="'height:'+Math.ceil(hotList.firstComment.content.length/20)*44+'rpx'">{{hotList.firstComment.content}}</text>
										</view>
										<image @click.stop="previewImage(hotList.firstComment.picture)"
											v-if="hotList.firstComment.picture" class='list-img' mode='widthFix'
											:src="hotList.firstComment.picture||'https://dnsverify.pfmoto.com/appstatic/community/item-img.png'">
										</image>
										<view class='list-num'>
											<text
												class='list-num'>{{hotList.firstComment.commentTime | timeFrom}}</text><text
												class='list-num'
												v-if="hotList.firstComment.secondCount>0">共{{hotList.firstComment.secondCount||0}}条回复</text>
										</view>
									</view>
									<view class='like-box' @click.stop="thumbCommuntyTouched(hotList.firstComment)">
										<image class='like-img' v-if="hotList.firstComment.isThumbs"
											src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
											mode="aspectFill">
										</image>
										<image class='like-img' v-else
											src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png"
											mode="aspectFill">
										</image>
										<text class='like-num'>{{hotList.firstComment.thumbsNum||0}}</text>
									</view>
								</view>
								<view class="" v-if="hotList.secondComments&&hotList.secondComments.length>0">
									<view class='l-first sub' v-for="(k,index) in hotList.secondComments" :key="index">
										<image class="header-img" mode='aspectFit'
											:src="k.userimages||'https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png'">
										</image>
										<view class='list-con'>
											<!-- <view class='list-name'>{{k.userName}}</view> -->

											<view class='list-name' v-if="k.wechatName==''||k.wechatName==null">
												<view v-if="k.phone==null||k.phone==undefined">
													<text class="list-name-text">已注销用户</text>

												</view>
												<view v-else>
													<text
														class="list-name-text">{{k.phone.substr(0, 3) + '*****' + k.phone.substr(8)}}</text>

												</view>
											</view>
											<view class='list-name' v-else><text
													class="list-name-text">{{k.wechatName}}</text></view>

											<view class='list-content' @click.stop="selectComment2(k,1)"><text :style="'height:'+Math.ceil(k.content.length/20)*44+'rpx'" class='list-content'>{{k.content}}</text>
											</view>
											<image @click.stop="previewImage(k.picture)" v-if="k.picture" class='list-img'
												mode='widthFix'
												:src="k.picture||'https://dnsverify.pfmoto.com/appstatic/community/item-img.png'">
											</image>
											<text class='list-num'>{{k.commentTime | timeFrom}}</text>
											<text class="more-comment"
												@click.stop="enterCommentDetail(hotList.firstComment)">
												查看全部回复
											</text>
										</view>
										<view class='like-box' @click.stop="thumbCommuntyTouched(k)">
											<image class='like-img' v-if="k.isThumbs"
												src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
												mode="aspectFill">
											</image>
											<image class='like-img' v-else
												src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png"
												mode="aspectFill">
											</image>
											<text class='like-num'>{{k.thumbsNum||0}}</text>
										</view>
									</view>
								</view>

							</view>
						</view>

						<view class='new-com' v-if="commentList.length>0" @click="selectOriginal">
							<view class='com-title'><text class='com-title'>最新评论</text></view>
							<view class='com-list' v-for="(item,index) in commentList" :key="index">
								<view class='l-first' >
									<image class="header-img" mode='aspectFit'
										:src="item.firstComment.userimages||'https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png'">
									</image>
									<view class='list-con'>
										<!-- <view class='list-name'>{{item.firstComment.userName}}</view> -->

										<view class='list-name'
											v-if="item.firstComment.wechatName==''||item.firstComment.wechatName==null">
											<text class="list-name-text"
												v-if="item.firstComment.phone==null||item.firstComment.phone==undefined">
												已注销用户
											</text>
											<text class="list-name-text" v-else>
												{{item.firstComment.phone.substr(0, 3) + '*****' + item.firstComment.phone.substr(8)}}
											</text>
										</view>
										<view class='list-name' v-else><text
												class="list-name-text">{{item.firstComment.wechatName}}</text>
										</view>
									
											<text :style="'height:'+Math.ceil(item.firstComment.content.length/20)*44+'rpx'" @click.stop="selectCommpent(item.firstComment,1)" class="list-content">{{item.firstComment.content}}</text>
									
										<image @click.stop="previewImage(item.firstComment.picture)"
											v-if="item.firstComment.picture" class='list-img' mode='widthFix'
											:src="item.firstComment.picture||'https://dnsverify.pfmoto.com/appstatic/community/item-img.png'">
										</image>
										<view class='list-num'>
											<text
												class="list-num">{{item.firstComment.commentTime | timeFrom}}</text><text
												class="list-num"
												v-if="item.firstComment.secondCount>0">共{{item.firstComment.secondCount}}条回复</text>
										</view>
									</view>
									<view class='like-box' @click.stop="thumbCommuntyTouched(item.firstComment)">
										<image class='like-img' v-if="item.firstComment.isThumbs ==1"
											src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
											mode="aspectFill">
										</image>
										<image class='like-img' v-else
											src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png"
											mode="aspectFill">
										</image>
										<text class='like-num'>{{item.firstComment.thumbsNum||0}}</text>
									</view>
								</view>
								<view class="" v-if="item.secondComments&&item.secondComments.length>0">
									<view class='l-first sub'>
										<image class="header-img" mode='aspectFit'
											:src="item.secondComments[0].userimages ||'https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png'">
										</image>
										<view class='list-con'>
											<!-- <view class='list-name'>{{item.secondComments[0].userName}}</view> -->

											<view class='list-name'
												v-if="item.secondComments[0].wechatName==''||item.secondComments[0].wechatName==null">
												<text class="list-name-text"
													v-if="item.secondComments[0].phone==null||item.secondComments[0].phone==undefined">
													已注销用户
												</text>
												<text class="list-name-text" v-else>
													{{item.secondComments[0].phone.substr(0, 3) + '*****' + item.secondComments[0].phone.substr(8)}}
												</text>
											</view>
											<text class='list-name-text' v-else>{{item.secondComments[0].wechatName}}</text>
											<text class='list-content' :style="'height:'+Math.ceil(item.secondComments[0].content.length/20)*44+'rpx'" @click.stop="selectComment2(item.secondComments[0],1)">{{item.secondComments[0].content}}</text>
											<image @click="previewImage(item.secondComments[0].picture)"
												v-if="item.secondComments[0].picture" class='list-img' mode='widthFix'
												:src=" item.secondComments[0].picture||'https://dnsverify.pfmoto.com/appstatic/community/item-img.png'">
											</image>
											<text class='list-num'>{{item.secondComments[0].commentTime | timeFrom}}
											</text>
											<text class="more-comment" @click="enterCommentDetail(item.firstComment)">
												查看全部回复
											</text>
										</view>
										<view class='like-box' @click.stop="thumbCommuntyTouched(item.secondComments[0])">
											<image class='like-img' v-if="item.secondComments[0].isThumbs"
												src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
												mode="aspectFill">
											</image>
											<image class='like-img' v-else
												src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png"
												mode="aspectFill">
											</image>
											<text class='like-num'>{{item.secondComments[0].thumbsNum||0}}</text>
										</view>
									</view>
								</view>
							</view>

						</view>
					</z-paging-cell>
				</z-paging>
				<!-- 评论输入框 -->
				<InputPanel style="width: 750rpx;" :commentType="commentType" :commentInfo="commentInfo" :replyLevel="replyLevel"
					:placeholder="placeholder" @changeHolder="changeHolder" @createComment="createCommentResult"
					:total="total" :itemValue="initValue" />

			</view>

		</uni-popup>

	</view>
</template>

<script>
	const app = getApp();
	const util = require("@/utils/util.js");
	const network = require("@/manager/network-manager.js");
	const dialog = require("@/utils/dialog.js");
	const dateForCalendar = require("@/utils/dateForCalendar.js");
	import InputPanel from '@/components/inputPanel/inputPanel.vue'
	export default {
		name: "comments-pop",
		components: {
			InputPanel
		},
		props: {
			initValue: {
				type: Object,
				default: () => {
					return {}
				}
			},
			type: {
				type: String,
				default: () => {
					return 'list'
				}
			},
			show: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			from: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				comment: '',
				falg: false,
				commentInfo: {},
				commentType: 0,
				placeholder: "说点什么",
				hotList: {
					firstComment: {
						secondCount: 0
					},
					secondComments: []
				},
				flag: false,
				tabBarHeight: app.globalData.tabBarHeigh,
				commentList: [],
				total: 0,
				pagination: {
					loadMore: true,
					page: 1,
					totalPage: 1,
					limit: 20,
					length: 100
				},
				selector: ['拍摄', '从手机相册选择'],
				fileList: [{
					type: 0,
					mediaType: 'add',
					url: '',
					path: '',
					uuid: util.createUidKey()
				}],
				isOk: false,
				
				replyLevel:'',
			};
		},



		mounted() {
			this.open()
			this.loadHotCommenyList()

			var that = this

			this.$nextTick(() => {
				// 触发下拉加载
				console.log(that.$refs.paging)
				that.$refs.paging.reload();
			})
		},
		methods: {
			selectOriginal(){
				this.changeHolder('说点什么')
			},
			createCommentResult(val) {
				console.log(val)
				let info = {
					content: val.content,
					picture: val.picture,
					commentTime: dateForCalendar.yearTime('yearTime', new Date()),
					wechatName: app.globalData.userInfo.wechatName ? app.globalData.userInfo.wechatName : app
						.globalData.userInfo.phone.substr(0, 3) + '*****' + app.globalData.userInfo.phone.substr(8),
					userimages: app.globalData.userInfo.userimages,
					uuid: val.id,
					isThumbs:0,
					thumbsNum:0,
				}

				this.commentList.map(item => {
					if (item.firstComment.uuid == val.pid) {
						item.secondComments.splice(0, 1, info)
						item.firstComment.secondCount = item.firstComment.secondCount + 1
					}
				})

				if (this.hotList.firstComment.uuid == val.pid) {
					this.hotList.secondComments.splice(0, 1, info)
					this.hotList.firstComment.secondCount = this.hotList.firstComment.secondCount + 1
				}

				if (this.initValue.id == val.pid) {
					var obj = {
						firstComment: info,
						secondComments: []
					}
					if (this.commentList.length > 0) {
						this.commentList.splice(0, 0, obj)
					} else {
						this.commentList.push(obj)
					}

				}
			},
			changeHolder(val) {
				debugger
				this.placeholder = val
				// this.commentInfo.uuid = ''
			},
			selectMedia() {
				var that = this
				uni.showActionSheet({
					itemList: that.selector,
					success: function(res) {
						that.confirm(res.tapIndex + 1)

					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			enterCommentDetail(row) {
				console.log(row)
				uni.navigateTo({
					url: '/module_community/pages/moments/list/list?row=' + JSON.stringify(row)
				})
			},
			//点赞社区动态
			thumbCommuntyTouched: function(item) {
				var that = this
				if (util.isLogin(getApp())) {
					this.detail = item
					var uri = app.globalData.config.interfaces.URL_COMMUNTIY_THUMB;
					var thumbsFlag
					this.detail.isThumbs == 0 ? thumbsFlag = 1 : thumbsFlag = 0
					var params = {
						"id": item.uuid,
						"loginId": app.getUserId(),
						"isfrom": 1,
						"thumbsFlag": thumbsFlag
					};
					network.post(uri, params, 'form').then(res => {
						if (res.code == 200) {
							item.thumbsNum = item.thumbsNum + (!item.isThumbs ? 1 : -1);
							item.isThumbs = !item.isThumbs;
						} else {
							setTimeout(() => {
								uni.showToast({
									title: res.message,
									duration: 3000,
									icon: 'none'
								})
							}, 500)
						}
					}).catch(res => {
						setTimeout(() => {
							uni.showToast({
								title: res.errMsg,
								duration: 3000,
								icon: 'none'
							})
						}, 500)
						console.error(res);
					});
				} else {
					util.jumpLogin();
				}
			},

			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']

				this.$refs.popup.open('bottom')
			},
			loadHotCommenyList() {
				if (this.falgAc) {
					return
				}
				var that = this;
				var uri = app.globalData.config.interfaces.URL_COMMENT_HOT;
				var params = {
					"pageNum": that.pagination.page,
					"pageSize": that.pagination.limit,
					"id": this.initValue.id,
					"loginId": app.getUserId() || ""
				};
				this.falgAc = true
				network.get(uri, params, 'form').then(res => {
					uni.stopPullDownRefresh();

					if (res.code == 200) {
						that.hotList = res.data
						this.flag = true
					} else {
						this.flag = false
						setTimeout(() => {
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}, 500)
					}
					this.falgAc = false
				}).catch(res => {
					this.flag = false
					this.falgAc = false
					uni.stopPullDownRefresh();
					setTimeout(() => {
						uni.showToast({
							title: res.errMsg,
							duration: 3000,
							icon: 'none'
						})
					}, 500)
					console.error(res);
				});
			},
			loadCommetCount() {

				var that = this;
				var uri = app.globalData.config.interfaces.URL_GET_COMMENTCOUNT;
				var params = {

					"communityId": this.initValue.id,

				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						this.total = res.data
					} else {
						setTimeout(() => {
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}, 500)
					}
				}).catch(res => {
					uni.stopPullDownRefresh();
					setTimeout(() => {
						uni.showToast({
							title: res.errMsg,
							duration: 3000,
							icon: 'none'
						})
					}, 500)
					console.error(res);
				});
			},
			/**
			 * 预览图片  
			 */
			previewImage: function(img) {

				//#ifndef MP-WEIXIN
				wx.previewImage({
					current: 0,
					urls: [img],
				});
				//#endif
				uni.previewImage({
					current: 0,
					urls: [img]
				});
			},
			loadCommentList: function(pageNo, pageSize) {
				this.loadCommetCount()
				var that = this;
				var uri = app.globalData.config.interfaces.URL_COMMENT_LIST;
				var params = {
					"pageNum": pageNo,
					"pageSize": pageSize,
					"id": this.initValue.id,
					"loginId": app.getUserId() || ""
				};
				network.get(uri, params, 'form').then(res => {


					if (res.code == 200) {
						that.$refs.paging.complete(res.data.list);
					} else {
						setTimeout(() => {
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}, 500)
					}
				}).catch(res => {

					setTimeout(() => {
						uni.showToast({
							title: res.errMsg,
							duration: 3000,
							icon: 'none'
						})
					}, 500)
					console.error(res);
				});
			},
			selectCommpent(item, type) {
				this.commentType = type
				this.commentInfo = item
				var name = ''
				if (item.wechatName == '' || item.wechatName == null) {
					if (item.phone == '' || item.phone == null) {
						name = '已注销用户'
					} else {
						name = item.phone
					}
				} else {
					name = item.wechatName
				}

				this.placeholder = "回复 @" + name + ':'
			},
			selectComment2(item, type){//点击二级
				this.replyLevel='2'
				this.commentType = type
				this.commentInfo = item
				var name = item.wechatName || item.phone
				this.placeholder = "回复@" + name + ':'
			},
			close() {
				uni.hideKeyboard()
				var that = this
				setTimeout(function() {
					uni.showTabBar()
					that.$emit('openMement', {}, false)
					that.$refs.popup.close()
					that.$forceUpdate()
				}, 100)
			}
		}
	}
</script>

<style lang='scss' scoped>
	.like-box {
		display: flex;
		flex-direction: row;
	}


	.more-comment {
		margin:10rpx 0 30rpx 0;
		font-size: 24rpx;
		color: #ea5404;
	}

	.con-title-image {
		width: 48rpx;
		height: 48rpx;
	}

	.con-title {
		/* #ifdef APP-NVUE */
		width: 750rpx;
		/* #endif */
		
		/* #ifndef APP-NVUE */
		width: 690rpx;
		/* #endif */
		
		padding: 0 36rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 600;
		font-size: 16px;
		height: 58px;
		line-height: 58px;
		background-color: #fff;
		opacity: 1;
		z-index: 99;
		position: absolute;
		/* #ifdef H5|| MP-WEIXIN */
		word-break: break-all;
		/* #endif */
		top: 10px;
		left: 0;
		flex-direction: row;
	}

	.comments-pop {
		width: 750rpx;
		color: #3D3A3A;
		font-size: 28rpx;
		background-color: red;
	}

	.pop-con {
		width: 750rpx;
		padding: 112rpx 32rpx;
		background: #FFFFFF;
		border-radius: 4px 4px 0px 0px;
		height: 1000rpx;
		/* #ifdef H5|| MP-WEIXIN */
		overflow: auto;
		/* #endif */

	}

	.con-title-text {
		font-weight: 600;
		font-size: 32rpx;
		line-height: 44rpx;
		/* display: flex;
		align-items: center; */

		color: #3D3A3A;
	}

	.com-title {
		font-weight: 400;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #000000;
		margin: 20rpx 0 0 0;
	}

	.l-first {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding:32rpx 0 0 0;
		height: auto;
	}

	.header-img {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
	}

	.list-con {
		flex: 1;
		padding:0 0 0 32rpx;
		line-height: 40rpx;




	}

	.list-name-text {
		color: #3D3A3A;
		font-size: 28rpx;
	}

	.list-content {
		margin: 10rpx 0 0 0;
		/* #ifdef H5|| MP-WEIXIN */
		word-break: break-all;
		/* #endif */

		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 28rpx;
		line-height: 40rpx;




		/* 力帆-黑 */

		color: #3D3A3A;
	}
	.com-list{
		margin: 0 0 20px 0;

	
	}
	.list-img {
		width: 200rpx;
		
		margin: 20rpx 0 0 0;
	}

	.list-num {
		font-size: 24rpx;
		line-height: 34rpx;
		color: #ADB0AE;
		margin : 4rpx 0 0 0;
	}

	.list-num-text {

		margin :0 20rpx 0 0;
	}

	.like-box {}

	.sub {
		padding : 48rpx 0 0 48rpx;
	}

	.all-footer {
		font-size: 28rpx;
		line-height: 76rpx;
		color: #ADB0AE;
		text-align: center;
	}

	.input-box {
		width: 100%;
		/* height: 108rpx; */
		display: flex;
		align-items: center;
		position: fixed;
		/* bottom: 40rpx; */
		left: 0;
		background-color: #fff;
		z-index: 99;
		height: 148rpx;
		bottom: 0rpx;
		/* image {
			width: 48rpx;
			height: 48rpx;
			margin: 0 32rpx;
		} */
	}

	.input {
		flex: 1;
		background: #EDEDED;
		border-radius: 4rpx;
		height: 68rpx;
		line-height: 68rpx;
		margin :0 0 0 32rpx;
		padding :0 0 0 32rpx;
		/* #ifdef H5|| MP-WEIXIN */
		word-break: break-all;
		/* #endif */
	}

	.send {
		font-size: 32rpx;
		line-height: 44rpx;
		color: #ADB0AE;
		margin :0 32rpx 0 0;
	}

	.active {
		color: #ea5454 !important;
	}

	.like-img {
		width: 34rpx;
		height: 34rpx;

	}

	.like-num {

		font-size: 24rpx;
		color: #ADB0AE;
		margin :0 0 0 4rpx;
		position: relative;
		top: 4rpx;

	}

	.myComment {
		color: #BDBDBD;
		font-size: 24rpx;
		margin :0 0 0  20rpx;
		margin :0 20rpx 0 0;
		width: 100%;
	}
</style>
